<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
	 <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
		<title></title>
		<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
		<link rel="stylesheet" th:href="@{/plugin/font-awesome/css/font-awesome.min.css}" media="all" />
		<link rel="stylesheet" th:href="@{/src/lvdong/origin/css/app.css}" media="all" />
		<link rel="stylesheet" th:href="@{/src/lvdong/origin/css/themes/default.css}" media="all" id="skin" kit-skin />
		<script th:src="@{/plugin/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
  		<script th:src="@{/plugin/jquery/jquery-3.4.1.js}" charset="utf-8"></script>
	</head>
	<body>
	<script>
		//根据获取的复选框数组对象删除对应用户以及关联表属性
		function deleteMenus(arr){
			var ids = new Array();
			$.each(arr,function(index,value){
				ids.push(this.menu_id);
			});
			$.ajax({
				type:'get',
				url:'/menuMg/deleteMenus?menu_ids='+ids,//数组用路径传参
				dataType:'json',
				success:function(data){
					if(data!=null){
						layer.msg(data.msg);
					}else
						layer.msg('服务器接收错误');
				}
			});
		}
</script>
		<table id="demo" lay-filter="test" ></table>
		 
		<script>
		layui.use(['jquery', 'table', 'layer', 'form'], function(){
		  var table = layui.table;
		  table.render({
		    elem: '#demo'
		    ,id:'test'
		    ,LAY_CHECKED:false
		    ,align:'center'
			,size:'lg'
		    ,even:true//开启隔行背景
			,skin:'line'//行边框风格
			,toolbar: '#toolbarDemo'
		    ,url: '/menuMg/getAllMenu.do' //数据接口
		    ,page: true//开启分页
		    ,skin:'row'//表格风格
			,title:'组织表'
			,parseData: function(res){ //res 即为原始返回的数据
					    return {
					      "code": res.code, //解析接口状态
					      "msg": res.msg, //解析提示文本
					      "data": res.data,//解析数据列表
					      "count":res.count//数据总数
					    };
					  }
			,response:{
					  statusName: 'code' ,// 对应 code
					  msgName: 'msg'  , // 对应 msg
					  statusCode:200,//默认成功状态码是0，
					  							//传回数据必须设置成功的状态码与其一致否则不会渲染
					  dataName: 'data',  // 对应 data
					  count:'count'
					}
			
		    ,cols: [
		    	[ //表头
		    	{type:'checkbox'}
			  ,{field: 'menu_id', title: 'ID', width:100,sort: true}
			  ,{field:  'menu_name', title: '菜单'}
			  ,{field:  'description', title: '描述'}
		    ]]
		  });
		  
		  //监听事件
		  table.on('toolbar(test)', function(obj){
		    switch(obj.event){
		      case 'add':{
		    	  layer.open({
		    		   type: 2,
		    		   title: false,
		    		   shade: [0.5],
		    		   title: '添加菜单',
		    		   shadeClose: true,
		    		   shade: 0.5,
		    		   skin:'demo-class',
		    		   maxmin: true, //开启最大化最小化按钮
		    		   area: ['700px', '500px'],
		    		   shift: 2,
		    		   //打开子页面
						content: '/addMenu'
		    			,success: function(layero, index){
		    		 				}
		    				  });
		    	  break;
		      }
		      case 'delete':{ 
		    	  	//获取复选框信息
			        var checkStatus = table.checkStatus('test');
			        //先判断是否空选
			        if(checkStatus<1){
			        	layer.msg("至少选择一个删除！");
			        	break;
			        }
			        deleteMenus(checkStatus.data);
				      break;
		      }
		      case 'update':{
		    	  var checkStatus = table.checkStatus('test'); //idTest 即为基础参数 id 对应的值
		    	  //先判断是否多选，多选则不予编辑
		    	  if(checkStatus.data.length>1){
			    	  layer.msg('编辑菜单不能多选，请单选后再编辑！');
			    	  break;
		    	  }else if(checkStatus.data.length==0){
			    	  layer.msg('请选择一个需要编辑的菜单！');
			    	  break;
		    	  }
		    	  //获取选中的数据
				//layui默认取得的是一个数组，每一行数据依次存放在数组[0]、[1]、[2]···
		    	  var data=checkStatus.data;
		    	  layer.open({
		    		   type: 2,
		    		   title: false,
		    		   shade: [0.5],
		    		   title: '编辑菜单',
		    		   shadeClose: true,
		    		   shade: 0.5,
		    		   skin:'demo-class',
		    		   maxmin: true, //开启最大化最小化按钮
		    		   area: ['700px', '500px'],
		    		   shift: 2,
		    		   //打开子页面
						content: '/editMenu'
		    			,success: function(layero, index){
		    				 		 var iframe = window['layui-layer-iframe' + index];
// 		    				 		 var body = layer.getChildFrame('body', index);//获取弹出层的dom元素
		    				 		 	//将该行数组存入
		    			                iframe.child(data);
		    		 				}
		    				  });
		   				   }
		  			  }
		 		});
		  
		});
		
		</script>
<script type="text/html" id="toolbarDemo"> 
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">新增菜单</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除菜单</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑菜单</button>
  </div>
</script>
 
	</body>
</html>
